<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<!--必须的样式文件-->
	<link rel="stylesheet" href="css/OrgCharts.css" />

	<!--自定义样式文件-->
	<link rel="stylesheet" href="css/my.css" />

	<body onload="draw();">

		<div style="background: #eee;height: 50px;width: 100%;text-align: center;line-height: 50px;">组织结构插件  by 多多</div>
		
		<div style="display: flex;flex-direction: row;">

			<div style="width: 50px;height: 800px;padding: 2px;text-align: center;">
				主题
				<div onclick="changeTheme('normal')" style="width: 30px;height: 30px;background: #3caee4;margin: 5px auto;cursor: pointer;"></div>
				<div onclick="changeTheme('red')" style="width: 30px;height: 30px;background: red;margin: 5px auto;cursor: pointer;"></div>
				<div onclick="changeTheme('green')" style="width: 30px;height: 30px;background: #1ce45a;margin: 5px auto;cursor: pointer;"></div>
				<div onclick="changeTheme('black')" style="width: 30px;height: 30px;background: #000000;margin: 5px auto;cursor: pointer;"></div>
				<div onclick="changeTheme('gray')" style="width: 30px;height: 30px;background: #6f6f6f;margin: 5px auto;cursor: pointer;"></div>

			</div>

			<div style="flex:1;overflow: hidden;display: block;text-align: center;">
				<div id="org_charts"></div>
			</div>
			
			
		</div>

	</body>

	<script type="text/javascript" src="js/OrgCharts.js"></script>

	<script type="application/javascript">
		var orgCharts=new OrgCharts();
		function draw() {
			
			
			//初始化组件  
			orgCharts.init({
				id: "org_charts", //必填
				theme: '', //可选
				menu:['edit','add','delete','cut','copy','absorbed'],//右键菜单项
				success: function() { //可选
					//console.log("初始化完成")
				},
				error: function(e) { //可选
					//console.log(e);
				},
				onClick: function(el, data) { //点击方法  el被点击的元素  data对应传入数据
					//console.log(data.id);
					alert('点击了' + data.name);
				},
				onAdd:function(data,tab){//添加回调 data为点击的数据  tab为标记点,用于插入新数据
					var myData=new Object();
					myData.name=prompt("输入name","新节点");
					myData.child=[];
					if(myData.name!=null){
						orgCharts.addNodes(myData,tab);
					}
				},
				onEdit:function(data){//编辑回调 data为点击的数据  tab为标记点,用于插入新数据
					data.name=prompt("输入name",data.html);
					if(data.name!=""){
						orgCharts.draw();//重新绘制
					}
				}
			});

			//加载方式1   
			orgCharts.drawByUrl({
				url: 'data/data.json', //必选  返回格式参考 data/data.json
				success: function() { //可选
					//console.log("绘制化完成");
				},
				error: function(e) { //可选
					//console.log('绘制失败');
				}
			});
			
			
			
			
			/*orgCharts.drawByData({
				data: 'jsondata',//必填json数据  格式请参照  data/data.json  中的data
				success: function() {//可选
					console.log("绘制化完成");
				},
				error: function(e) {//可选
					console.log('绘制失败');
				}
			});*/

			/*
			 * 设置主题  主题类型normal ,red ,green ,black ,gray
			 * 可自定义样式文件
			 * 类名格式如 
			 * node-my 节点样式
			 * vertical-line-my 竖线样式
			 * transverse-line-my 横线样式
			 * 详细参考my.style
			 * 该方法
			 */
			//orgCharts.setTheme('gray');

		}

		function changeTheme(theme) {
			orgCharts.setTheme(theme);
		}
	</script>

</html>

